<template>

  <div class="app-resource-panel" v-loading="loading" @click="hideMobileHomeDataOpVisiable">
    <div v-if="appInfo.appId!='' && isOpen  && showConfigPage" class="open-panel first">
      <div class="open-panel-left" :class="isCollapse?'right':'full'">
        <div class="appresource-header-title">
          <el-tooltip class="item" effect="dark" :content="appInfo.appId" placement="right">
            <div style="display:inline-block;">{{ appInfo.appName }}</div>
          </el-tooltip>
          <awsui-switch switchery left v-model="mobileVisible" :activeText="$t('开启移动入口')" :inactiveText="$t('关闭移动入口')"
                        activeColor="#3383da" inactiveColor="#b6b6b6" @click.stop="changeSaveAppResource"
                        class="open-switch" :disabled="stateBtnDisabled"></awsui-switch>

        </div>
        <div class="appresource-header-toolbar">
          <awsui-radio-group style="float:left;">
            <awsui-radio v-model="resourceType" label="common">{{$t("标准首页")}}</awsui-radio>
            <awsui-radio v-model="resourceType" label="h5url">{{$t("自定义URL")}}</awsui-radio>
          </awsui-radio-group>
          <awsui-button type="primary" style="height:30px;margin:5px 0px;float:right;width:80px;"
                        @click.stop="saveMobileHome('')" :disabled="btnDisabled">{{$t("保存")}}
          </awsui-button>
        </div>

        <div class="appresource-content-panel" v-show="resourceType=='common'">
          <div class="appresource-subheader-toolbar">

            <awsui-switch switchery left v-if="showUseCustomMenuSwitch" v-model="useCustomMenu"
                          @change="handleCustomMenu" :activeText="$t('自定义功能菜单')" :inactiveText="$t('自定义功能菜单')" activeColor="#3383da"
                          inactiveColor="#b6b6b6" class="use-custom-menu-switch"></awsui-switch>


            <el-link type="info" :underline="false" href="javascript:void(0);"
                     style="font-size:13px;font-weight:normal;padding-right:10px;cursor:default;">{{$t("说明：布局模式可在移动端查看效果")}}
            </el-link>
            <awsui-radio-group style="padding-right:20px;vertical-align:middle;" class="showtype-group">
              <awsui-radio v-model="showType" label="list">{{$t("列表视图")}}</awsui-radio>
              <awsui-radio v-model="showType" label="box">{{$t("网格视图")}}</awsui-radio>
            </awsui-radio-group>

            <awsui-popover placement="bottom" :width="160" trigger="click">
              <template #reference>
                <el-link type="info" :underline="false" href="javascript:void(0);"
                         style="font-size:13px;font-weight:normal;margin-top:-2px;">
                  {{$t("扫码测试")}}  &nbsp;<i class="awsui-iconfont" style="margin-bottom:3px;">&#xe77f;</i>
                </el-link>
              </template>
              <div>
                <qrcode-vue :value="qrCodeUrl" size="160" level="H"/>
              </div>
            </awsui-popover>

          </div>
          <div class="groups-content-panel" :class="!useCustomMenu?'groupDisabled':''">
            <draggable
                tag="div"
                :list="groups"
                :component-data="getComponentData()"
                @start="drag=true"
                @end="drag=false"
                item-key="groupName">
              <template #item="{element}">
                <div class="groups-cards-wrap" @mouseenter="categoryMouseEnter(element)"
                     @mouseleave="categoryMouseLeave(element)">
                  <el-card class="box-card groups-cards">
                    <template #header>
                      <div class="card-header">
												<span v-if="!element.isEditing" @dblclick="changeEdit(element)">
													<i class="awsui-iconfont" v-if="groups.length>1">&#xe785;</i>
													{{ element.groupName }}
												</span>
                        <awsui-input v-if="element.isEditing" :ref="`categoryName${element.groupName}`"
                                     v-model="editCategoryName" @blur="saveEdit(element)"></awsui-input>
                        <el-button class="button" type="text" v-if="element.showOp"><i class="awsui-iconfont"
                                                                                       style="color:red;"
                                                                                       @click="deleteCategory(element.groupName)">&#xe626;</i>
                        </el-button>
                      </div>
                    </template>
                    <div class="groups-sub-content" style="display:inline-block;">
                      <div
                          v-for="(subInfo,d) in (element.data!=undefined && element.data.length>0)?element.data:element.children"
                          :key="d" style="display:inline-block;float:left;">
                        <el-card v-if=" subInfo!=null" class="sub-cards" shadow="hover"
                                 @mouseenter="functionMouseEnter(subInfo)" @mouseleave="functionMouseLeave(subInfo)">
                          <i v-show="subInfo.type=='process' && subInfo.showOp" style="color:#73abec;margin-left:-2px;"
                             class="awsui-iconfont subtype">&#xe665;</i>
                          <i v-show="subInfo.type=='dw' && subInfo.showOp" style="color:#53beb3;margin-left:-2px;"
                             class="awsui-iconfont subtype">&#xe99c;</i>
                          <i v-show="subInfo.type=='dashboard' && subInfo.showOp"
                             style="color:#ab74f5;margin-left:-2px;" class="awsui-iconfont subtype">&#xe8e8;</i>
                          <el-popover :placement="popoverPlacement" :width="540" trigger="manual"
                                      :visible="subInfo.opPopVisible == undefined ? false : subInfo.opPopVisible">
                            <div class="tree-node-more-panel">
                              <div class="more-left-panel">
                                <awsui-input :placeholder="$t('修改名称')" v-model="currentFunctionName"
                                             @blur="changeFunctionName(subInfo)"></awsui-input>
                                <awsui-icon-picker v-model="iconColors" :defaultOptions="defaultIconPickerOptions"
                                                   @change="handleIconFont" @status="getStatus"
                                                   v-if="subInfo.updateIconPicker"></awsui-icon-picker>
                              </div>
                              <div class="more-right-panel">
                                <el-row class="tac">
                                  <el-col :span="24">
                                    <ul class="cu-pop-menu" style="">
                                      <li class="cu-pop-menu-li" @click="showFunctionPowerUser(subInfo)">
                                        <div class="cu-pop-item-div" v-show="subInfo.isNav">
                                          <span class="icon-span"><i name="" class="awsui-iconfont">&#xe60b;</i></span>
                                          <div class="cu-pop-item-div-title"><span>{{$t("查看可访问人员")}}</span></div>
                                          <div class="cu-pop-item-div-right"></div>
                                        </div>
                                      </li>
                                      <li class="cu-pop-menu-li" @click="updateFunction(element.groupName,d,subInfo)">
                                        <div class="cu-pop-item-div">
                                          <span class="icon-span"><i name="" class="awsui-iconfont">&#xe636;</i></span>
                                          <div class="cu-pop-item-div-title"><span>{{$t("修改")}}</span></div>
                                          <div class="cu-pop-item-div-right"></div>
                                        </div>
                                      </li>
                                      <li class="cu-pop-menu-li" @click="deleteFunction(subInfo)">
                                        <div class="cu-pop-item-div" style="color: red;">
                                          <span class="icon-span" style="color: red;"><i name="" class="awsui-iconfont">&#xe626;</i></span>
                                          <div class="cu-pop-item-div-title"><span>{{$t("删除")}}</span></div>
                                          <div class="cu-pop-item-div-right"></div>
                                        </div>
                                      </li>
                                    </ul>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                            <template #reference>
                              <i class="awsui-iconfont more-op" v-show="subInfo.showOp"
                                 @click.stop="opMoreClick(subInfo,$event)">&#xe719;</i>
                            </template>
                          </el-popover>
                          <div class="sub-item-icon"
                               :style="{'background': (subInfo.iconFontColor!='') ? (subInfo.iconFontColor) : '#f2f2f2'}">
                            <i v-html="(subInfo.iconFontCode!='')?(subInfo.iconFontCode):'&#xe614;'"
                               class="awsui-iconfont"></i>
                          </div>
                          <div class="sub-item-text">
                            <span>{{ subInfo.text }}</span>
                          </div>
                        </el-card>
                      </div>
                      <el-card class="sub-cards" shadow="hover" @click="addFunctions(element.groupName)">
                        <div class="sub-item-icon" style="background:#f2f2f2;">
                          <i class="awsui-iconfont">&#xe623;</i>
                        </div>
                        <div class="sub-item-text">
                          <span>{{addText}}</span>
                        </div>
                      </el-card>

                    </div>
                  </el-card>
                </div>
              </template>
            </draggable>

            <div class="add-category" @click="addCategory">
              <i class="awsui-iconfont" style="font-size: 12px;">&#xe623;</i>&nbsp;{{$t("点击此处添加一个分类")}}
            </div>
          </div>
        </div>
        <div class="appresource-content-panel-custom" v-show="resourceType=='h5url'">
          <awsui-form ref="customhomeform" :model="HomeCustomInfo" label-position="top" label-width="80px" size="mini"
                      :rules="homeCustomUrlFormRules">

            <el-row :gutter="15">
              <el-col :span="24">
                <awsui-form-item :label="$t('自定义URL')" prop="customUrl" required>
                  <awsui-input :placeholder="$t('cmd= 或 指定的URL地址')" v-model="HomeCustomInfo.customUrl"/>
                  <!--<awsui-formula v-model="HomeCustomInfo.customUrl" :option="atFormulaOptionForUrl" @input="onCmCodeChangeForUrl" placeholder="cmd= 或 指定的URL地址"></awsui-formula>-->
                </awsui-form-item>
              </el-col>
            </el-row>
          </awsui-form>
        </div>

      </div>
      <div class="open-panel-right" style="display:none;">

      </div>
    </div>
    <div v-else-if="(appInfo.appId!= undefined  && appInfo.appId!='') && !isOpen  && showConfigPage"
         class="no-open-panel second">
      <div style="height:100%;line-height:100%;">
        <el-row :gutter="12" style="text-align:center;" class="left-row">
          <el-col :span="24" class="left-row-col preview">
            <div class="app-home-page-preview">
              <el-carousel :interval="5000" arrow="hover">
                <el-carousel-item>
                  <img src="../../../static/pic-box.png"/>
                </el-carousel-item>
                <el-carousel-item>
                  <img src="../../../static/pic-list.png"/>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
          <el-col :span="24" class="left-row-col appname">
            {{ appInfo.appName }}
          </el-col>
          <el-col :span="24" class="left-row-col desc">
            {{$t("定制应用首页入口，在移动端访问该应用")}}
          </el-col>
          <el-col :span="24" class="left-row-col">
            <awsui-button type="success" @click="saveAppResourceState(appInfo.appId)" v-if="!isOpen"
                          style="width:70px;">{{$t("开启")}}
            </awsui-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-else-if="!showConfigPage" class="app-resource-nodata third">
      {{ notShowConfigMsg }}
    </div>
    <div v-else class="app-resource-nodata four">
      {{$t("请选择一个应用")}}
    </div>


    <awsui-dialog :title="$t('添加分类')" v-model="categoryDialogVisible" width="60%" append-to-body>
      <div class="nav-add-category-dlg-content">
        <awsui-form ref="categoryform" :model="CategoryInfo" label-position="top" label-width="80px" size="mini"
                    :rules="categoryFormRules">

          <el-row :gutter="15">
            <el-col :span="24">
              <awsui-form-item :label="$t('分类名')" prop="category" required>
                <awsui-input :placeholder="$t('请输入分类')" v-model="CategoryInfo.category"/>
              </awsui-form-item>
            </el-col>
          </el-row>
        </awsui-form>
      </div>
      <template #footer>
					<span class="dialog-footer">
					  <awsui-button type="primary" @click="closeCategoryDialog">{{$t("确 定")}}</awsui-button>
					</span>
      </template>
    </awsui-dialog>


    <awsui-dialog :title="$t('添加')" v-model="functionDialogVisible" width="60%" height="70%" append-to-body
                  class="functionDialogCls">
      <div class="nav-function-add-dlg-content" :style="{height:navDlgHeight+'px'}">
        <el-row :gutter="15">
          <el-col :span="24">
            <awsui-input :placeholder="$t('搜索功能')" v-model="functionSearchValue" @keyup.enter.native="filterFunctionData">
              <template #prefix>
                <i class="awsui-iconfont">&#xe6e9;</i>
              </template>
            </awsui-input>
          </el-col>
        </el-row>


        <el-tabs tab-position="left" class="function-tab-panel" v-model="activeName">
          <el-tab-pane :name="d" v-for="(info,d) in groupSubData" :key="d" class="function-el-tab-panel">
            <template #label>
							<span class="custom-tab-label" :title="info.text">
								{{ info.text }}
							</span>
            </template>
            <div class="function-list-panel" v-if="info.children.length > 0">
              <el-table
                  v-show="info.children.length > 0"
                  ref="multipleTable"
                  :data="info.children"
                  tooltip-effect="dark"
                  style="width: 100%"
                  :show-header="false"
                  :empty-text="$t('暂无数据')">
                <el-table-column width="60">
                  <template #default="scope">
                    <div class="row-app-icon" :style="{background: scope.row.iconFontColor}">
                      <i v-html="scope.row.iconFontCode" class="awsui-iconfont"></i>
                    </div>

                  </template>
                </el-table-column>
                <el-table-column width="24" class-name="function-type-td">
                  <template #default="scope">
                    <i v-if="scope.row.type=='process'" style="color:#73abec;margin-left:-6px;" class="awsui-iconfont">&#xe665;</i>
                    <i v-else-if="scope.row.type=='dw'" style="color:#53beb3;margin-left:-6px;" class="awsui-iconfont">&#xe99c;</i>
                    <i v-else-if="scope.row.type=='dashboard'" style="color:#ab74f5;margin-left:-6px;"
                       class="awsui-iconfont">&#xe8e8;</i>
                  </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip>
                  <template #default="scope">
                    {{ scope.row.text }}
                  </template>
                </el-table-column>
                <el-table-column width="77" class-name="function-button-td">
                  <template #default="scope">
                    <awsui-button v-if="scope.row.isAdded" type="danger" plain size="small"
                                  @click="removeFunctionItem(scope.row)">{{removeText}}
                    </awsui-button>
                    <awsui-button v-else type="primary" plain class="btn" size="small"
                                  @click="addFunctionItem(scope.row)">{{$t("添加")}}
                    </awsui-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-else class="no-match">
              {{$t("暂无数据")}}
            </div>

          </el-tab-pane>
          <el-tab-pane name="customUrlTab" class="function-el-tab-panel">
            <template #label>
              <span class="custom-tab-label" :title="$t('自定义URL')">{{$t("自定义URL")}}</span>
            </template>
            <awsui-form ref="form" :model="CustomUrlInfo" label-position="top" label-width="80px" size="mini"
                        :rules="customUrlFormRules">
              <el-row :gutter="15">
                <el-col :span="24">
                  <awsui-form-item :label="$t('名称')" prop="customH5Name" required>
                    <awsui-input v-model="CustomUrlInfo.customH5Name" :placeholder="$t('请输入名称')"></awsui-input>
                  </awsui-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col :span="24">
                  <awsui-form-item :label="$t('URL地址')" prop="customH5Url" required>
                    <awsui-input v-model="CustomUrlInfo.customH5Url" :placeholder="$t('cmd= 或 指定的URL地址')"></awsui-input>
                  </awsui-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="15" style="margin-top:15px;">
                <el-col :span="24" style="text-align:right;">
                  <awsui-button type="primary" @click="addCustomFunctionItem('add')">{{$t("添 加")}}</awsui-button>
                  <awsui-button @click="resetCustomH5Form">{{$t("重 置")}}</awsui-button>
                </el-col>
              </el-row>
            </awsui-form>

          </el-tab-pane>
        </el-tabs>
      </div>
      <template #footer>
					<span class="dialog-footer">
						<awsui-button @click="closeFunctionDialog">{{$t("关 闭")}}</awsui-button>
					</span>
      </template>
    </awsui-dialog>


    <awsui-dialog :title="$t('修改')" v-model="functionReplaceDialogVisible" width="60%" height="70%" append-to-body
                  class="functionDialogCls">
      <div class="nav-function-add-dlg-content" :style="{height:navDlgHeight+'px'}">
        <el-row :gutter="15">
          <el-col :span="24">
            <awsui-input :placeholder="$t('搜索功能')" v-model="functionSearchValue" @keyup.enter.native="filterFunctionData">
              <template #prefix>
                <i class="awsui-iconfont">&#xe6e9;</i>
              </template>
            </awsui-input>
          </el-col>
        </el-row>


        <el-tabs tab-position="left" class="function-tab-panel" v-model="activeName">
          <el-tab-pane :name="d" v-for="(info,d) in groupSubData" :key="d" class="function-el-tab-panel">
            <template #label>
							<span class="custom-tab-label" :title="info.text">
								{{ info.text }}
							</span>
            </template>
            <div class="function-list-panel" v-if="info.children.length > 0">
              <el-table
                  v-show="info.children.length > 0"
                  ref="multipleTable"
                  :data="info.children"
                  tooltip-effect="dark"
                  style="width: 100%"
                  :show-header="false"
                  :empty-text="$t('暂无数据')">
                <el-table-column width="60">
                  <template #default="scope">
                    <div class="row-app-icon" :style="{background: scope.row.iconFontColor}">
                      <i v-html="scope.row.iconFontCode" class="awsui-iconfont"></i>
                    </div>

                  </template>
                </el-table-column>
                <el-table-column width="24" class-name="function-type-td">
                  <template #default="scope">
                    <i v-if="scope.row.type=='process'" style="color:#73abec;margin-left:-6px;" class="awsui-iconfont">&#xe665;</i>
                    <i v-else-if="scope.row.type=='dw'" style="color:#53beb3;margin-left:-6px;" class="awsui-iconfont">&#xe99c;</i>
                    <i v-else-if="scope.row.type=='dashboard'" style="color:#ab74f5;margin-left:-6px;"
                       class="awsui-iconfont">&#xe8e8;</i>
                  </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip>
                  <template #default="scope">
                    {{ scope.row.text }}
                  </template>
                </el-table-column>
                <el-table-column width="77" class-name="function-button-td">
                  <template #default="scope">
                    <awsui-button type="primary" plain class="btn" size="small" @click="replaceFunctionItem(scope.row)">
                      {{replaceText}}
                    </awsui-button>
                  </template>
                </el-table-column>
              </el-table>

            </div>
            <div v-else class="no-match">
               {{$t("暂无数据")}}
            </div>

          </el-tab-pane>

          <el-tab-pane name="customUrlUpdateTab" class="function-el-tab-panel">
            <template #label>
              <span class="custom-tab-label" :title="$t('自定义URL')">{{$t("自定义URL")}}</span>
            </template>
            <awsui-form ref="updateform" :model="CustomUrlUpdateInfo" label-position="top" label-width="80px" size="mini"
                        :rules="customUrlFormRules">
              <el-row :gutter="15">
                <el-col :span="24">
                  <awsui-form-item :label="$t('名称')" prop="customH5Name" required>
                    <awsui-input v-model="CustomUrlUpdateInfo.customH5Name" :placeholder="$t('请输入名称')"></awsui-input>
                  </awsui-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col :span="24">
                  <awsui-form-item :label="$t('URL地址')" prop="customH5Url" required>
                    <awsui-input v-model="CustomUrlUpdateInfo.customH5Url" :placeholder="$t('cmd= 或 指定的URL地址')"></awsui-input>
                  </awsui-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="15" style="margin-top:15px;">
                <el-col :span="24" style="text-align:right;">
                  <awsui-button type="primary" @click="addCustomFunctionItem('update')">>{{$t("修 改")}}</awsui-button>
                  <awsui-button @click="resetCustomH5Form">{{$t("重 置")}}</awsui-button>
                </el-col>
              </el-row>
            </awsui-form>

          </el-tab-pane>

        </el-tabs>
      </div>
      <template #footer>
					<span class="dialog-footer">
					 <awsui-button @click="closeFunctionDialog">{{$t("关 闭")}}</awsui-button>
					</span>
      </template>
    </awsui-dialog>

    <!--侧边栏-->
    <el-drawer :title="$t('可访问人员')" v-model="powerUserDarwer" :destroy-on-close="true" size="60%" :append-to-body="true">
      <div class="nav-power-user-drawer-content">
        <power-user-info :navId="navId"></power-user-info>
      </div>
    </el-drawer>
    <!--侧边栏结束-->

  </div>

</template>

<script lang="ts">
import {defineComponent, getCurrentInstance, nextTick, onMounted, ref, watch} from 'vue'
import draggable from 'vuedraggable';
import PowerUserInfo from '../main/PowerUserInfo.vue'
import QrcodeVue from "qrcode.vue";

export default defineComponent({
  name: "AppResource",
  components: {
    draggable, PowerUserInfo, QrcodeVue
  },
  props: {
    appInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    isCollapse: {
      type: Boolean
    },
    haveWorkbenchCmd: {
      type: Boolean
    },
    currentAppId: {
      type: String
    },
    isYijingCloud: {
      type: Boolean
    },
    isYijingStandard: {
      type: Boolean
    },
    isYijingPortal_4: {
      type: Boolean
    },
    isYijingWPS: {
      type: Boolean
    },
    showUseCustomMenuSwitch: {
      type: Boolean
    }
  },
  emits: ['refreshList'],
  setup(props: any, context) {
    const instance = getCurrentInstance();
    const {proxy} = getCurrentInstance() as any;
    //const {ctx: $this} = getCurrentInstance() as any;
    const settingParam = instance?.appContext.config.globalProperties.AWSPageContext?.settingParam;

    let categoryDialogVisible = ref(false);
    let category = ref("");
    let isOpen = ref(false);
    let mobileVisible = ref(true);
    let useCustomMenu = ref(true);
    useCustomMenu.value = !props.isYijingStandard;
    let isYijingCloud = ref(true);
    isYijingCloud.value = props.isYijingCloud;
    let isYijingPortal_4 = ref(true);
    isYijingPortal_4.value = props.isYijingPortal_4;
    let isYijingWPS = ref(true);
    isYijingWPS.value = props.isYijingWPS;
    let showUseCustomMenuSwitch = ref(true);
    showUseCustomMenuSwitch.value = props.showUseCustomMenuSwitch;
    let HomeCustomInfo = ref({
      customUrl: ''
    });
    let homeCustomUrlFormRules = ref({
      customUrl: [{required: true, message: proxy.$t('必填')},]
    });
    let CategoryInfo = ref({
      category: ''
    });
    let categoryFormRules = ref({
      category: [{required: true, message:proxy.$t('必填')},]
    });
    let resourceURI = ref("");
    let showType = ref("list");//list,box
    let groups: any = ref([]);
    let groupSubData: any = ref([]);
    let groupSubDataClone: any = ref([]);
    let resourceType = ref("common");//common,h5url
    let standardArray = ref({});
    let drag = ref(true);
    let activeName = ref("0");
    let functionDialogVisible = ref(false);
    let functionReplaceDialogVisible = ref(false);
    let functionSearchValue = ref("");
    let currentCategoryName = ref("");
    let currentFunctionIndex = ref(-1);
    let categoryHoverShow = ref(false);
    let functionHoverShow = ref(false);
    let qrCodeUrl = ref("");
    let currentFunctionName = ref("");
    let currentFunctionId = ref("");
    let powerUserDarwer = ref(false);
    let navId = ref('');
    let loading = ref(false);
    let showConfigPage = ref(true);
    let notShowConfigMsg = ref('');
    let workbenchCanUse = ref(true);
    workbenchCanUse.value = props.haveWorkbenchCmd;
    let defaultGroupDataForCustom = ref([]);
    let defaultGroupDataForNav = ref([]);
    let CustomUrlInfo = ref({
      customH5Name: '',
      customH5Url: ''
    });
    let deleteConfirmMsg = proxy.$t('确定要删除吗？');
    let opSuccessMsg = proxy.$t('操作成功');
    let addMsgInfo = proxy.$t('添加成功');
    let replaceMsgInfo = proxy.$t('替换成功');
    let deleteCategoryConfirm = proxy.$t('确定要删除该分类吗?');
    let confirmTitle = proxy.$t('提示');
    let confirmOk = proxy.$t('确定');
    let confirmCancel = proxy.$t('取消');
    let removeText = proxy.$t('移除');
    let addText = proxy.$t('添加');
    let replaceText = proxy.$t('替换');

    let workbenchMsg = proxy.$t('[流程中心]不可用，请检查应用是否安装并启动');
    let mobileTimer: any = null;

    let CustomUrlUpdateInfo = ref({
      customH5Name: '',
      customH5Url: ''
    });

    let customUrlFormRules = ref({
      customH5Name: [{required: true, message: proxy.$t('必填')},],
      customH5Url: [{required: true, message: proxy.$t('必填')},]
    });

    let defaultIconPickerOptions = ref({
      type: "background", //必传，type为"background"时，改变背景颜色，图标颜色固定，type为"icon"时改变图标颜色，背景颜色固定
      //icon: "&#xe601;",  //字体图标或旧的img图片
      icon: "http://111.200.241.83:8089/portal/commons/img/home_96.png",
      format: true, //icon是否是图片格式
      color: "#009688", //颜色
      disabled: false, //是否禁止选择
      show: true, //是否直接显示，不通过点击
      /*customClass: '' //自定义类名*/
    });

    let iconColors = ref({
      icon: "",
      color: "",
    });

    let editCategoryName = ref('');

    let btnDisabled = ref(false);
    let stateBtnDisabled = ref(false);
    let popoverPlacement = ref("bottom");

    let atFormulaOptionForUrl = ref({
      readonly: false,
      sid: eval("settingParam").sessionId,  //此awsui-demo下已自动注入sid，请勿将此sid写死提交
      defaultValue: '',
      contextData: {
        data: [],
        appId: ""
      },
      placeholder: proxy.$t('请输入相应的提示信息'),
      url: eval("axiosBaseUrl") + "w",
      data: {
        sid: eval("settingParam").sessionId,
        cmd: "CLIENT_M_FORMULA_EDITOR_MAIN_PAGE",
        contextData: ""
      },
      callback: (value: any) => {
        HomeCustomInfo.value.customUrl = value
      }
    })

    const handleCustomMenu = (): void => {
      if (useCustomMenu.value) {
        groups.value = defaultGroupDataForCustom.value;
      } else {
        groups.value = defaultGroupDataForNav.value;
      }
    };

    const urlAxios = instance?.appContext.config.globalProperties.awsuiaxios;

    let getAppResourceData = (): void => {
      let appId = props.appInfo.appId;
      let data = {
        url: 'jd',
        data: {
          cmd: 'CONSOLE_P_NAV_MOBILE_HOME_GET_APP_INFO',
          sid: eval("settingParam").sessionId,
          appId: appId,
        }
      };
      loading.value = true;
      // 查询数据
      urlAxios.post(data).then(function (ro: any) {
        console.log(ro);
        loading.value = false;
        if (ro.result == "ok") {
          showConfigPage.value = true;
          notShowConfigMsg.value = "";
          let resourceURIInfo = ro.data.resourceURI;
          let dgc = ro.data.defaultGroupDataForCustom;
          defaultGroupDataForCustom.value = dgc;
          let dgn = ro.data.defaultGroupDataForNav;
          defaultGroupDataForNav.value = dgn;
          if (typeof resourceURIInfo === 'object') {
            resourceURI.value = "";
          } else {
            resourceURI.value = resourceURIInfo;
          }

          groupSubData.value = JSON.parse(JSON.stringify(ro.data.groupSubData))//添加功能中的列表
          groupSubDataClone.value = JSON.parse(JSON.stringify(groupSubData.value))//添加功能中的列表
          resourceType.value = ro.data.resourceType;
          mobileVisible.value = ro.data.mobileVisible;
          //二维码
          let mobileHomePage = ro.data.mobileUrl + "/r/w?sid=" + ro.data.mobileSid + "&cmd=com.actionsoft.apps.workbench_mobile_apphome_page&appId=" + appId + "&showType=qrcode";
          qrCodeUrl.value = mobileHomePage;
          console.log(qrCodeUrl.value);

          if (mobileVisible.value) {
            isOpen.value = true;
            if (resourceType.value == "h5url") {
              HomeCustomInfo.value.customUrl = ro.data.resourceURI;
              //reset
              showType.value = 'list';
              groups.value = [];
            } else {
              HomeCustomInfo.value.customUrl = '';//reset

              if (resourceURI != undefined && resourceURI != ref("")) {
                console.log(resourceURIInfo);
                if (resourceURIInfo.showtype != undefined) {
                  showType.value = resourceURIInfo.showtype;
                } else {
                  showType.value = 'list';
                }
                if (resourceURIInfo.useCustomMenu != undefined) {
                  useCustomMenu.value = resourceURIInfo.useCustomMenu;
                }
                groups.value = resourceURIInfo.groups;
                //存储可见状态
                if (resourceURIInfo.standardArray != undefined) {
                  standardArray.value = resourceURIInfo.standardArray;
                } else {
                  standardArray.value = {};
                }
              }

            }
          } else {
            isOpen.value = false;
            groups.value = resourceURIInfo.groups;
          }
        } else if (ro.result == "warning") {
          showConfigPage.value = false;
          notShowConfigMsg.value = ro.msg;
          //proxy.$message({type: ro.result, message: ro.msg});
        }

      }).catch(function (error: any) {
        console.log(error);
      });
    };

    const addFunctions = (groupName: string): void => {
      functionSearchValue.value = "";
      groupSubData.value = groupSubDataClone.value;

      currentCategoryName.value = groupName;
      currentFunctionIndex.value = -1;
      let subFunctionNames = "";
      let subFunctionIds = "";

      groups.value.forEach((ele: any, index: number) => {
        if (ele.groupName == groupName) {
          var subData = ele.children != undefined ? ele.children : ele.data;
          if (typeof (ele.data) != "undefined" && ele.data.length > 0) {
            subData = ele.data;
          }
          if (subData != undefined) {
            subData.forEach((elesub: any, indexsub: number) => {
              subFunctionNames += elesub.text + ","
              subFunctionIds += elesub.id + ","
            });
          }
        }
      });

      groupSubData.value.forEach((ele: any, index: number) => {
        ele.children.forEach((elesub: any, indexsub: number) => {
          if (subFunctionNames.indexOf(elesub.text + ",") != -1 || subFunctionIds.indexOf(elesub.id + ",") != -1) {
            elesub.isAdded = true;
          } else {
            elesub.isAdded = false;
          }
        });

      });


      functionDialogVisible.value = true;
      functionSearchValue.value = "";
      activeName.value = '0';
      if (groupSubData.value.length == 0) {
        activeName.value = 'customUrlTab';
      }

      resetCustomH5Form();
    };
    const closeFunctionDialog = (e: any): void => {
      currentCategoryName.value = "";
      functionDialogVisible.value = false;
      functionReplaceDialogVisible.value = false;

    };
    const changeSaveAppResource = (): void => {
      chargeWorkBenchApp();
      stateBtnDisabled.value = true;
      saveMobileHome('state');
    };
    const saveAppResourceState = (appId: any) => {
      props.appInfo.appId = appId;
      mobileVisible.value = true;
      saveMobileHome('state');
    };
    const addCategory = (e: any): void => {
      CategoryInfo.value.category = "";
      categoryDialogVisible.value = true;
      //reset 校验
      if (instance != null) {
        let form = (instance.refs["categoryform"] as any);
        if (form != undefined) {
          form.resetFields();
        }
      }
    };
    const closeCategoryDialog = (e: any) => {
      //空校验
      new Promise((resolve, reject) => {
        if (instance != null) {
          (instance.refs["categoryform"] as any).validateField("category", (msg: any, info: any) => {
            if (info != null) {
              resolve(false)
            } else {
              resolve(true)
              addCategoryElement();
              categoryDialogVisible.value = false;
            }
          });
        }
      });
    };
    const addCategoryElement = (): void => {
      var obj: any = {
        groupName: CategoryInfo.value.category,
        data: [],
      };
      groups.value.push(obj);

    };

    const getComponentData = () => {
      return {
        wrap: true,
      }
    };

    const saveMobileHome = (type: any) => {
      hideMobileHomeDataOpVisiable();
      let appId = props.appInfo.appId;
      //移动入口 判断类型common为标准首页，h5url为自定义URL
      let resourceURIStr = "";
      if (resourceType.value == "common") {
        //标准首页的设置内容存到resourceURI字段中
        resourceURIStr = getCommonParams();
        clearTimeout(mobileTimer);
        mobileTimer = setTimeout(() => {
          doSaveMobileHome(type, resourceURIStr, appId);
        }, 500);

      } else if (resourceType.value == "h5url") {
        //空校验
        let valid = new Promise((resolve, reject) => {
          if (instance != null) {
            (instance.refs["customhomeform"] as any).validateField("customUrl", (msg: any, info: any) => {
              if (info != null) {
                resolve(false)
              } else {
                resolve(true)
                resourceURIStr = HomeCustomInfo.value.customUrl;
                clearTimeout(mobileTimer);
                mobileTimer = setTimeout(() => {
                  doSaveMobileHome(type, resourceURIStr, appId);
                }, 500);

              }
            });
          }
        });
      }
    };
    const doSaveMobileHome = (type: any, resourceURIStr: any, appId: any) => {
      var strJson: any = {
        resourceURI: resourceURIStr,
        resourceType: resourceType.value,
        ssoType: "sid",
        mobileVisible: mobileVisible.value,
        appId: appId,
      };
      console.log(strJson);
      strJson = escape(JSON.stringify(strJson));

      btnDisabled.value = true;
      loading.value = true;
      let data = {
        url: 'jd',
        data: {
          cmd: 'CONSOLE_P_NAV_MOBILE_HANDLE_AND_SAVE_MOBILE_XML_FILE',
          sid: settingParam.sessionId,
          appId: appId,
          strJson: strJson,
        }
      };
      // 查询数据
      urlAxios.post(data).then(function (ro: any) {
        console.log(ro);
        if (ro.result == "ok") {
          if (type != undefined && type == 'state') {
            if (props.currentAppId == "") {
              if (mobileVisible.value) {
                // ElMessage.success('开启成功');
                proxy.$message({type: 'success', message: proxy.$t('开启成功')});
                context.emit("refreshList", appId, "afterOpen");
              } else {
                proxy.$message({type: 'success', message: proxy.$t('关闭成功')});
                //ElMessage.success('关闭成功');
                context.emit("refreshList", "", "afterClose");
              }
            } else {
              if (mobileVisible.value) {
                proxy.$message({type: 'success', message: proxy.$t('开启成功')});
                //ElMessage.success('开启成功');
                isOpen.value = true;
              } else {
                proxy.$message({type: 'success', message: proxy.$t('关闭成功')});
                // ElMessage.success('关闭成功');
                //props.appInfo.appId = "";
                isOpen.value = false;
              }
            }

          } else {
            proxy.$message({type: 'success', message: proxy.$t('保存成功')});
            // ElMessage.success('保存成功');
            //getAppResourceData();
          }
        } else {
          //恢复状态
        }

        btnDisabled.value = false;
        stateBtnDisabled.value = false;
        loading.value = false;

      });
    }

    const getCommonParams = () => {
      let resultData: any = {};
      //移动端展示方式
      var showtype = showType.value;
      console.log(groups.value);
      //移除无用项
      if (groups.value == undefined) {
        groups.value = [];
      }
      groups.value.forEach((ele: any, index: number) => {
        delete ele["showOp"];
        delete ele["isEditing"];
        //delete ele["children"];  //有的历史数据是common类型 但是咩有resourceuri数据  会默认加载（获取默认自动添加的流程/DW）children 数据 先不删除

        if (typeof (ele.data) != "undefined" && ele.data.length > 0) {
          ele.data.forEach((elesub: any, indexsub: number) => {
            delete elesub["showOp"];
            delete elesub["isNav"];
            delete elesub["navId"];
            delete elesub["updateIconPicker"];
            delete elesub["opPopVisible"];
          });
        } else {
          ele.data = ele["children"];//将children数据给data 并删除children
          delete ele["children"];
        }
      });
      //if(useCustomMenu.value){
      resultData.groups = groups.value;
      //}
      resultData.showtype = showtype;
      resultData.standardArray = standardArray.value;
      resultData.useCustomMenu = useCustomMenu.value;
      return resultData;
    };

    const defaultCommonParams = () => {
      let resultData: any = {};
      //移动端展示方式
      resultData.groups = [];
      resultData.showtype = 'list';
      return resultData;
    };

    const deleteCategory = (categoryName: string): void => {
      proxy.$confirm( deleteCategoryConfirm, confirmTitle, {
        confirmButtonText:  confirmOk,
        cancelButtonText: confirmCancel,
        type: 'warning'
      }).then(() => {
        //从数组中移除这个分类
        groups.value.forEach((ele: any, index: number) => {
          if (ele.groupName == categoryName) {
            groups.value.splice(index, 1);
          }
        });
        proxy.$message({type: 'success', message: opSuccessMsg});
      });
    };

    const categoryMouseEnter = (data: any): void => {
      data.showOp = true;
      //data.isEditing = false;

    };

    const categoryMouseLeave = (data: any): void => {
      data.showOp = false;
      //data.isEditing = false;
    };

    const functionMouseEnter = (data: any): void => {
      data.showOp = true;
      hideMobileHomeDataOpVisiable();
    };

    const functionMouseLeave = (data: any): void => {
      data.showOp = false;
    };


    const hideMobileHomeDataOpVisiable = (): void => {
      if (groups.value != undefined) {
        groups.value.forEach((ele: any, index: number) => {
          if (typeof (ele.data) != "undefined" && ele.data.length > 0) {
            ele.data.forEach((elesub: any, indexsub: number) => {
              elesub.opPopVisible = false;
            });
          } else {
            if (ele.children != undefined) {
              ele.children.forEach((elesub: any, indexsub: number) => {
                elesub.opPopVisible = false;
              });
            }

          }
        });
      }

    };


    const filterFunctionData = (): void => {
      groupSubData.value = groupSubDataClone.value;
      let query = functionSearchValue.value;
      let newSubData = JSON.parse(JSON.stringify(groupSubData.value));

      let newArr: any = [];
      newSubData.forEach((item: any, index: number) => {
        newArr[index] = item;
        newArr[index].children = item.children.filter((subItem: any) => {
              return subItem.text.toLowerCase().indexOf(query.toLowerCase()) > -1;
            }
        );
      });
      groupSubData.value = newArr;


    };

    onMounted(() => {
      console.log('mounted!');
      chargeWorkBenchApp();
      if (JSON.stringify(props.appInfo) === '{}') {
      } else {
        if (props.appInfo != undefined) {
          isOpen.value = props.appInfo.isOpen;
          getAppResourceData();
        }
      }
    });

    onMounted(() => {
      window.onresize = () => {
        navDlgHeight.value = (window.innerHeight > 800) ? '500' : window.innerHeight * 0.5
      }
    });

    const chargeWorkBenchApp = () => {
      if (!workbenchCanUse.value) {
        proxy.$message({type: 'warning', message: workbenchMsg });
      }
    };

    const handleIconFont = (iconFont: any) => {
      let code = iconFont.icon;
      let color = iconFont.color;

      groups.value.forEach((ele: any, index: number) => {

        var subData = ele.children != undefined ? ele.children : ele.data;
        if (typeof (ele.data) != "undefined" && ele.data.length > 0) {
          subData = ele.data;
        }

        subData.forEach((elesub: any, indexsub: number) => {
          if (elesub.id == currentFunctionId.value) {
            elesub.iconFontColor = color;
            elesub.iconFontCode = code;
          }
        });

      });
    };

    const reloadIconPicker = (data: any): void => {
      // 移除组件
      data.updateIconPicker = false;
      // 在组件移除后，重新渲染组件
      nextTick(() => {
        data.updateIconPicker = true;
      });
    };

    const getStatus = (val: any) => {
      console.log(val);
    };

    const showFunctionPowerUser = (data: any): void => {
      powerUserDarwer.value = true;
      navId.value = data.navId;
    };

    const updateFunction = (groupName: string, index: number, subInfo: any): void => {
      hideMobileHomeDataOpVisiable();
      //修改功能项 替换原来位置的
      functionSearchValue.value = "";
      groupSubData.value = groupSubDataClone.value;

      currentCategoryName.value = groupName;
      currentFunctionIndex.value = index;

      functionReplaceDialogVisible.value = true;
      functionSearchValue.value = "";
      if (subInfo.type == "h5url") {
        //重置自定义url的校验
        resetCustomH5Vaild();

        activeName.value = 'customUrlUpdateTab';
        CustomUrlUpdateInfo.value.customH5Name = subInfo.text;
        CustomUrlUpdateInfo.value.customH5Url = subInfo.h5url;
      } else {
        activeName.value = '0';
      }

    };

    const replaceFunctionItem = (data: any): void => {
      groups.value.forEach((ele: any, index: number) => {
        if (ele.groupName == currentCategoryName.value) {
          var obj: any = {
            id: data.id,
            text: data.text,
            type: data.type,
            iconFontCode: data.iconFontCode,
            iconFontColor: data.iconFontColor,
            isNav: data.isNav,
            navId: data.navId,
          };
          if (ele.data == undefined) {
            ele.data = [];
            ele.data[currentFunctionIndex.value] = obj;
          } else {
            ele.data[currentFunctionIndex.value] = obj;
          }

        }
      });
      //改变添加状态
      data.isAdded = true;
      proxy.$message({type: 'success', message: opSuccessMsg});
    };


    const deleteFunction = (data: any): void => {
      proxy.$confirm(deleteConfirmMsg, confirmTitle, {
        confirmButtonText:  confirmOk,
        cancelButtonText: confirmCancel,
        type: 'warning'
      }).then(() => {
        //移除该功能  bug 2060 children 和data都要移除 否则会有空白
        groups.value.forEach((ele: any, index: number) => {
          let hasChildren = false;
          let hasData = false;
          if (ele.children != undefined) {
            hasChildren = true;
          }
          if (typeof (ele.data) != "undefined" && ele.data.length > 0) {
            hasData = true;
          }
          if (hasData) {
            ele.data.forEach((elesub: any, indexsub: number) => {
              if (elesub.id == data.id) {
                ele.data.splice(indexsub, 1);
                if (hasChildren) {
                  ele.children.splice(indexsub, 1);
                }
              }
            });
          } else if (hasChildren) {
            ele.children.forEach((elesub: any, indexsub: number) => {
              if (elesub.id == data.id) {
                ele.children.splice(indexsub, 1);
              }
            });
          }

        });
        //ElMessage.success('删除成功');
        proxy.$message({type: 'success', message: opSuccessMsg});
      }).catch(() => {
        // ElMessage.info('已取消删除')
      });

    };

    const removeFunctionItem = (data: any): void => {
      groups.value.forEach((ele: any, index: number) => {
        if (ele.groupName == currentCategoryName.value) {
          var subData = ele.children != undefined ? ele.children : ele.data;
          if (typeof (ele.data) != "undefined" && ele.data.length > 0) {
            subData = ele.data;
            functionItemSplice(subData, data.id);
          }
          if (typeof (ele.children) != "undefined" && ele.children.length > 0) {
            subData = ele.children;
            functionItemSplice(subData, data.id);
          }
        }
      });
      //改变移除状态
      data.isAdded = false;
    };

    const functionItemSplice = (subData: any, dataId: string): void => {
      if (subData != undefined) {
        subData.forEach((elesub: any, indexsub: number) => {
          if (elesub.id == dataId) {
            subData.splice(indexsub, 1);
          }
        });
      }
    };

    const addFunctionItem = (data: any): void => {
      //如果其他分类中有这个function 先移除
      groups.value.forEach((ele: any, index: number) => {

        var subData = ele.children != undefined ? ele.children : ele.data;
        if (typeof (ele.data) != "undefined" && ele.data.length > 0) {
          subData = ele.data;
          functionItemSplice(subData, data.id);
        }
        if (typeof (ele.children) != "undefined" && ele.children.length > 0) {
          subData = ele.children;
          functionItemSplice(subData, data.id);
        }


      });

      groups.value.forEach((ele: any, index: number) => {
        if (ele.groupName == currentCategoryName.value) {
          var obj: any = {
            id: data.id,
            text: data.text,
            type: data.type,
            iconFontCode: data.iconFontCode,
            iconFontColor: data.iconFontColor,
            isNav: data.isNav,
            navId: data.navId,
          };
          if (ele.data == undefined) {
            ele.data = [];
            ele.data.push(obj);
          } else {
            ele.data.push(obj);
          }

        }
      });
      //改变添加状态
      data.isAdded = true;
    };

    const addCustomFunctionItem = (type: any) => {
      //如果其他分类中有这个function 先移除

      /* let valid = validCustomUrlForm();
       if (valid != undefined && !valid) {
           return false;
       }*/

      validCustomUrlForm(type,() => {
        let customH5Name = CustomUrlInfo.value.customH5Name;
        let customH5Url = CustomUrlInfo.value.customH5Url;
        if (type == "update") {
          customH5Name = CustomUrlUpdateInfo.value.customH5Name;
          customH5Url = CustomUrlUpdateInfo.value.customH5Url;
        }


        groups.value.forEach((ele: any, index: number) => {
          if (ele.groupName == currentCategoryName.value) {
            var subData = ele.children != undefined ? ele.children : ele.data;
            if (typeof (ele.data) != "undefined" && ele.data.length > 0) {
              subData = ele.data;
            }
            subData.forEach((elesub: any, indexsub: number) => {
              if (elesub.id == "cus_" + customH5Name) {
                currentFunctionIndex.value = indexsub;
              }
            });
          }
        });

        groups.value.forEach((ele: any, index: number) => {
          if (ele.groupName == currentCategoryName.value) {
            var obj: any = {
              id: "cus_" + customH5Name,
              text: customH5Name,
              h5url: customH5Url,
              type: 'h5url',
              iconFontCode: '&#58900;',
              iconFontColor: '#f2f2f2',
              isNav: false,
              navId: '',
            };

            if (currentFunctionIndex.value == -1) {
              //正常添加
              if (ele.data != undefined) {
                ele.data.push(obj);
              } else if (ele.children != undefined) {
                ele.children.push(obj);
              }
              proxy.$message({type: 'success', message: addMsgInfo});
            } else {
              //替换
              if (ele.data == undefined) {
                ele.data = [];
                ele.data[currentFunctionIndex.value] = obj;
              } else {
                ele.data[currentFunctionIndex.value] = obj;
              }
              proxy.$message({type: 'success', message: replaceMsgInfo});
            }

          }
        });
      });


    };

    const resetCustomH5Vaild = (): void => {
      //reset 校验 功能h5
      if (instance != null) {
        let form = (instance.refs["form"] as any);
        if (form != undefined) {
          form.resetFields();
        }
      }
    };


    const resetCustomH5UpdateVaild = (): void => {
      //reset 校验 功能h5
      if (instance != null) {
        let updateform = (instance.refs["updateform"] as any);
        if (updateform != undefined) {
          updateform.resetFields();
        }
      }
    };

    const resetCustomH5Form = (): void => {
      CustomUrlInfo.value.customH5Name = "";
      CustomUrlInfo.value.customH5Url = "";
      CustomUrlUpdateInfo.value.customH5Name = "";
      CustomUrlUpdateInfo.value.customH5Url = "";
      resetCustomH5Vaild();
      resetCustomH5UpdateVaild();
    };


    const validCustomUrlForm = (type:any,callback: any) => {
      if(type == "add" ){
        validCustomUrlAddForm(callback);
      } else  if(type == "update" ){
        validCustomUrlUpdateForm(callback);
      }
    };


    const validCustomUrlAddForm = (callback: any) => {
      if (instance != null) {
        (instance.refs["form"] as any).validate((valid: any) => {
          if (valid) {
            callback();
          }
        });
      }
    };

    const validCustomUrlUpdateForm = (callback: any) => {
      if (instance != null) {
        (instance.refs["updateform"] as any).validate((valid: any) => {
          if (valid) {
            callback();
          }
        });
      }
    };

    const changeEdit = (element: any): void => {
      element.isEditing = true;
      editCategoryName.value = element.groupName;
      nextTick(() => {
        if (proxy.$refs['categoryName' + element.groupName]) {
          proxy.$refs['categoryName' + element.groupName].$el.querySelector("input").focus();
        }
      });

    };

    const saveEdit = (element: any): void => {
      element.isEditing = false;
      element.groupName = editCategoryName.value;
    };

    const onCmCodeChangeForUrl = (newCode: any) => {
      if (typeof newCode == "string") {
        HomeCustomInfo.value.customUrl = newCode;
      }
    };

    const changeFunctionName = (subInfo: any) => {
      subInfo.text = currentFunctionName.value;
    };

    const opMoreClick = (subInfo: any, event: any) => {
      let el = event.currentTarget;
      let bottomH = window.innerHeight - event.target.getBoundingClientRect().y - event.target.getBoundingClientRect().height;
      //console.log(bottomH);
      //console.log(event.target.getBoundingClientRect());
      if (bottomH < 325) {
        popoverPlacement.value = "top";
        let topH = event.target.getBoundingClientRect().y;
        let left = event.target.getBoundingClientRect().left;
        if (topH < 325) {
          //上面显示不全
          if (left > 610) {
            //左侧显示全
            popoverPlacement.value = "left";
          } else {
            //左侧显示不全
            popoverPlacement.value = "right";
          }

        }
      } else {
        popoverPlacement.value = "bottom";
      }

      subInfo.opPopVisible = true;

      currentFunctionName.value = subInfo.text;
      currentFunctionId.value = subInfo.id;
      //defaultIconPickerOptions.value.icon = subInfo.iconFontCode;
      //defaultIconPickerOptions.value.color = subInfo.iconFontColor;
      iconColors.value.icon = subInfo.iconFontCode;
      iconColors.value.color = subInfo.iconFontColor;
      reloadIconPicker(subInfo);


    };

    watch(() => props.appInfo, (newVal: any) => {
      loading.value = false;
      editCategoryName.value = '';
      chargeWorkBenchApp();
      groups.value = [];
      if (JSON.stringify(props.appInfo) === '{}') {
      } else {
        if (props.appInfo != undefined) {
          isOpen.value = props.appInfo.isOpen;
          getAppResourceData();
        }

      }

    });


    const navDlgHeight: any = ref([]);
    navDlgHeight.value = (window.innerHeight > 800) ? '500' : window.innerHeight * 0.5;

    return {
      removeText,
      addText,
      replaceText,
      mobileTimer,
      navDlgHeight,
      categoryDialogVisible,
      category,
      isOpen,
      mobileVisible,
      useCustomMenu,
      isYijingCloud,
      isYijingPortal_4,
      isYijingWPS,
      showUseCustomMenuSwitch,
      resourceURI,
      showType,//list,box
      groups,
      groupSubData,
      groupSubDataClone,
      resourceType,//common,h5url
      standardArray,
      drag,
      settingParam,
      activeName,
      functionDialogVisible,
      functionReplaceDialogVisible,
      functionSearchValue,
      currentCategoryName,
      currentFunctionIndex,
      categoryHoverShow,
      functionHoverShow,
      qrCodeUrl,
      defaultIconPickerOptions,
      iconColors,
      currentFunctionName,
      currentFunctionId,
      powerUserDarwer,
      navId,
      CustomUrlInfo,
      CustomUrlUpdateInfo,
      customUrlFormRules,
      HomeCustomInfo,
      homeCustomUrlFormRules,
      CategoryInfo,
      categoryFormRules,
      loading,
      workbenchCanUse,
      editCategoryName,
      btnDisabled,
      stateBtnDisabled,
      atFormulaOptionForUrl,
      urlAxios,
      popoverPlacement,
      showConfigPage,
      notShowConfigMsg,
      defaultGroupDataForCustom,
      defaultGroupDataForNav,
      getAppResourceData,
      addFunctions,
      changeSaveAppResource,
      saveAppResourceState,
      addCategory,
      closeCategoryDialog,
      addCategoryElement,
      getComponentData,
      closeFunctionDialog,
      saveMobileHome,
      doSaveMobileHome,
      getCommonParams,
      deleteCategory,
      categoryMouseEnter,
      categoryMouseLeave,
      functionMouseEnter,
      functionMouseLeave,
      defaultCommonParams,
      filterFunctionData,
      handleIconFont,
      getStatus,
      showFunctionPowerUser,
      updateFunction,
      deleteFunction,
      removeFunctionItem,
      functionItemSplice,
      addFunctionItem,
      addCustomFunctionItem,
      replaceFunctionItem,
      reloadIconPicker,
      resetCustomH5Vaild,
      resetCustomH5UpdateVaild,
      resetCustomH5Form,
      validCustomUrlForm,
      validCustomUrlUpdateForm,
      validCustomUrlAddForm,
      chargeWorkBenchApp,
      changeEdit,
      saveEdit,
      onCmCodeChangeForUrl,
      changeFunctionName,
      opMoreClick,
      hideMobileHomeDataOpVisiable,
      handleCustomMenu,

    }
  }
});

</script>

<style scoped>
.appresource-header-title {
  font-size: 15px;
  color: #333;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 30px;
  line-height: 30px;
}

.appresource-header-toolbar {
  height: 40px;
  line-height: 40px;
}

.open-switch {
  float: right;
  margin-top: 0px;
}

.appresource-subheader-toolbar {
  display: inline-block;
  width: 100%;
  text-align: right;
  height: 50px;
  line-height: 50px;
}

.appresource-content-panel {
  background: #fbfbfb;
  padding: 0px 10px 10px 10px;
  height: calc(100% - 40px - 30px);
}

.appresource-content-panel-custom {
  background: #fbfbfb;
  height: calc(100% - 40px - 30px);
  padding: 10px;
}

.app-resource-panel {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.app-resource-nodata {
  text-align: center;
  margin-top: calc(50vh - 27px - 30px);
}

.no-open-panel {
  height: calc(100%);
}

.open-panel {
  height: calc(100%);
}

.open-panel-left {
  display: inline-block;
  float: left;
  padding: 0px 20px 0px 25px;
  height: calc(100%);
}

.open-panel-left.full {
  width: calc(100% - 20px - 25px);
}

.open-panel-left.right {
  width: calc(100% - 20px - 25px);
}

.groups-content-panel {
  height: calc(100% - 40px - 20px);
  overflow-y: auto;
  overflow-x: hidden;
}

.open-panel-right {
  display: inline-block;
  width: 400px;
  float: right;
  height: calc(100% - 55px);
  line-height: calc(100% - 55px);
  margin-top: 30px;
  overflow: hidden;
}

.left-row {
  top: calc(50% - 200px - 50px);
}

.left-row .left-row-col {
  height: 30px;
}

.left-row .appname {
  font-size: 16px;
  font-weight: bold;
  margin-top: 40px;
  color: #555555;
}

.left-row .desc {
  font-size: 14px;
  color: #888888;
}

.left-row .preview {
  height: auto;
}

.app-home-page-preview {
  height: calc(325px * 0.8);
  width: calc(300px * 0.8);
  overflow: hidden;
  margin: 0 auto;
}

.app-home-page-preview img {
  vertical-align: top !important;
}

.add-category {
  height: 30px;
  line-height: 30px;
  background: #ffffff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}

.add-category:hover {
  color: #3383da;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.sub-item-icon {
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: #ffff;
  border-radius: 50%;
  text-align: center;
  margin-top: 10px;
  margin-left: 15px;
}

.sub-item-text {
  padding: 5px 5px;
  text-align: center;
  width: 70px;
  height: 40px;
  line-height: 22px;
  overflow: hidden;
  /*
      white-space: nowrap;
      */
  text-overflow: ellipsis;
}

.sub-item-icon i {
  size: 24px;
}

.nav-function-add-dlg-content {
  height: 100%;
}

.function-tab-panel {
  height: calc(100% - 28px - 10px);
  padding-top: 10px;
}

.function-el-tab-panel {
  height: calc(100%);
}

.function-list-panel {
  height: calc(100%);
  overflow-y: auto;
}

.function-each-row {
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  padding: 5px 0px;
}

.function-list-panel li:hover {
  background: #f8f8f8;
  border-radius: 4px;
}

.function-el-tab-panel .no-match {
  color: #999;
  text-align: center;
  font-size: 14px;
  width: 100%;
  display: flex;
  height: 100%;
  line-height: 100%;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

.row-app-name {
  display: inline-block;
  padding: 0px 5px;
  /*width: 350px;*/
  width: calc(60% - 300px);
  overflow: hidden;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.row-app-icon {
  display: inline-block;
  float: left;
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: #ffff;
  border-radius: 50%;
  text-align: center;
  margin-left: 0px;
}

.row-app-icon i {
  size: 24px;
}

.row-app-img {
  display: inline-block;
  float: left;
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: #ffff;
  border-radius: 5px;
  text-align: center;
  margin-top: 5px;
  margin-left: 10px;
}

.row-app-op {
  height: 30px;
  line-height: 30px;
  width: 100px;
  float: right;
  text-align: right;
  padding: 0 5px;
}


.tree-node-more-panel {

}

.more-left-panel {
  padding: 0px 5px;
  width: 300px;
  display: inline-block;
  float: left;
  border-right: 1px solid #e8e8e8;
}

.more-right-panel {
  width: 227px;
  display: inline-block;
  float: right;
}

.cu-pop-menu .activity {

}

.cu-pop-menu .disabled {
  color: #9C9E9E;
  cursor: default;
}

.cu-pop-menu-li {
  cursor: pointer;
}

.cu-pop-menu-li:hover {
  background: #f2f9ff;
  color: #3380e6;
}

.cu-pop-item-div {
  min-width: 210px !important;
}

.cu-pop-item-div .icon-span {
  margin-top: -4px;
}

.nav-power-user-drawer-content {
  overflow: hidden;
  padding: 0 15px;
  height: calc(100% - 57px);
}
</style>
<style>
.app-home-page-preview .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.app-home-page-preview .el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.app-home-page-preview .el-carousel--horizontal .el-carousel__container {
  overflow: hidden !important;

}

.app-home-page-preview .el-carousel__arrow {
  top: 45% !important;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}

.groups-cards {
  cursor: move;
  width: 100%;
  margin-bottom: 10px;
}

.sub-cards {
  padding: 0px;
  width: 80px;
  display: inline-block;
  margin: 0px 15px;
  border: none !important;
  cursor: pointer;
  float: left;
}

.sub-cards .el-card__body {
  padding: 0px !important;
  position: relative;
}

.sub-cards .more-op {
  position: absolute;
  right: 0px;
  top: 0px;
}

.sub-cards .subtype {
  position: absolute;
  left: 4px;
  top: 0px;
}

.el-card__header {
  padding: 5px 20px !important;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
}


.el-tabs--left .el-tabs__item.is-left {
  text-align: left !important;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.function-tab-panel .el-tabs__nav-wrap.is-left:after {
  width: 1px !important;
}

.function-tab-panel .el-tabs__active-bar {
  width: 1px !important;
}

.function-tab-panel > .el-tabs__content {
  height: 100% !important;
}

.functionDialogCls.el-dialog.awsui-dialog-forHeight .el-dialog__body {
  height: calc(100% - 102px - 40px);
}

.use-custom-menu-switch {
  float: left;
}

.use-custom-menu-switch .awsui-switch {
  height: 50px;
  line-height: 50px;
}

.groupDisabled {
  pointer-events: none;
  opacity: .5;
}

.appresource-subheader-toolbar .el-radio {
  height: 50px;
  line-height: 50px;
}

.showtype-group .awsui-radio {
  margin-right: 15px;
}

.showtype-group .awsui-radio .el-radio__label {
  margin-top: 3px;
}

.function-list-panel .el-table td, .el-table th {
  padding: 8px 8px 8px 0px !important;
}

.function-type-td .cell {
  text-overflow: unset !important;
}

.function-button-td .cell {
  text-overflow: unset !important;
}
</style>